
<template>
  <el-container>
    <el-header><Header /></el-header>
    <el-main><Main :calling="calling" /></el-main>
    <el-footer><Footer @callStatus="handleCallStatus" /></el-footer>
  </el-container>
</template>


<script setup>
import { ref } from 'vue';
import Header from '@/pages/components/header/index.vue';
import Main from '@/pages/components/main/index.vue';
import Footer from '@/pages/components/footer/index.vue';

const calling = ref(false);
function handleCallStatus(val) {
  calling.value = val;
}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.el-header,
.el-main,
.el-footer {
  padding: 0;
}
.el-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #202027;
}
</style>